<template>
  <div class="flex align_item lh60 height100 pr20">
    <div class="mauto5 search" v-show="searchStatus" style="width: 260px">
      <el-input size="small" v-model="condition" class="mauto5" placeholder="请输入项目名称" clearable>
        <el-button slot="append" icon="el-icon-search" @click.native="searchKeyWord">搜索</el-button>
      </el-input>
    </div>
    <svg-icon icon-class="search" class-name="fz18 pointer cb6b6b6 mauto5" @click="searchStatus = !searchStatus"></svg-icon>
    <el-popover
      popper-class="pdtb8"
      placement="bottom"
      trigger="click">
      <ul class="condition">
        <li class="pointer ThemehoverBg7">筛选</li>
        <li class="pointer ThemehoverBg7 ">
          <p>自定义筛选条件</p>
          <p class="flex align_item"><i class="el-icon-plus"></i><span class="fz12 c999">添加自定义筛选</span></p>
        </li>
        <li class="pointer ThemehoverBg7">我拥有的</li>
      </ul>
      <svg-icon slot="reference" icon-class="filter" class-name="fz18 pointer cb6b6b6 mauto5"></svg-icon>
    </el-popover>
    <svg-icon icon-class="static" class-name="fz18 pointer cb6b6b6 mauto5"></svg-icon>
    <svg-icon icon-class="message" class-name="fz18 pointer cb6b6b6 mauto5"></svg-icon>
  </div>
</template>

<script>
  export default {
    name: 'FilterCondition',
    data() {
      return {
        condition: '',
        searchStatus:false
      }
    },
    methods: {
      searchKeyWord() {
        this.$emit('search', this.condition)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .flex i {
    color: #b6b6b6;
    text-align: center;
  }
  .condition {
    li {
      padding: 8px 12px;
    }
  }
</style>
